<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>显示模式</title>
		<style>
			.box{
				width: 300px;
				border: 1px solid red;
				height: 300px;
				margin: 100px auto;
			}
		</style>
	</head>
	<body>
		<!-- 
		 元素的显示模式：
		 1.块元素block
		 比较霸道，单独占一行
		 默认情况宽度和父级元素一样宽
		 可以给元素设置宽，高和水平居中
		 块元素中可以包含行内元素与块元素
		 常见块元素：div p o1 u1 h1~h6
		 
		 2.行内元素inline
		 -行显示多个
		 默认宽度有由内容填充，内容多宽元素多宽
		 宽，高水平居中属性不适用
		 行内元素只能容纳文本或者其他行内元素
		 常见内行元素：span de1 
		 3.行内块元素inline-block
		 -行显示多个
		 默认宽度由内容填充，内容多宽元素多宽
		 可以给元素设置宽，高
		 input img td
		 元素显示模式的转换
		 display：转换后的显示模式
		 display：block；转换为块元素
		 
		 text-decoration:none;     /*去掉a标签的下划线 */
		 -->
		<div>
			<img src=""/>
			<h3>hello</h3>
			<p class="box">hello duanluo</p>
			<span>2399</span>
			<span>2499</span>
			<a href="#">这是链接</a>
		</div>
	</body>
</html>
